import { motion } from 'framer-motion';
import BottomNav from '../components/BottomNav';
import { PlusIcon } from '@heroicons/react/24/outline';

export default function DiaryPage() {
  return (
    <div className="pb-16">
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="p-4 max-w-md mx-auto"
      >
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold dark:text-white">我的日记</h1>
          <button className="p-2 rounded-full bg-primary text-white">
            <PlusIcon className="w-5 h-5" />
          </button>
        </div>
        
        <div className="space-y-3">
          {[1, 2, 3].map((item) => (
            <motion.div 
              key={item}
              whileHover={{ scale: 1.02 }}
              className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700"
            >
              <h3 className="font-medium dark:text-white">日记标题 {item}</h3>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                这是日记的简短摘要内容...
              </p>
              <div className="flex justify-between items-center mt-3 text-xs text-gray-400">
                <span>2023-06-{10 + item}</span>
                <span>编辑</span>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
      
      <BottomNav />
    </div>
  );
}